<template>
  <div>
     <van-nav-bar :title="$route.meta.title"  @click-right="$router.push('/search')" >
      <template #right>
        <van-icon name="search" size="18"  />
      </template>
    </van-nav-bar>
    <template v-if="haslogin">
        <van-swipe-cell class="mt10"  v-for="(item,index) in carlist"   :key="index">
        <van-card
         
          :price="item.price"
          :desc="item.goodsname"
          :title="item.goodsname"
          class="goods-card"
          :thumb="$HOST+item.img"
        >
          <template #footer>
            <van-stepper v-model="item.num" @plus="editCar({id:item.id,type:2})" @minus="editCar({id:item.id,type:1})" :async-change="true" theme="round" button-size="22" disable-input />
          </template>
        </van-card>
        <template #right>
          <van-button square text="删除"  @click="delCar(item.id)" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>

      <van-submit-bar :price="totalPrice*1" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="checked">全选</van-checkbox>
      </van-submit-bar>
    </template>
    <van-button type="primary" v-else to="/login" block>请登录</van-button>
     
  </div>
</template>

<script>
import {  mapState,mapActions,mapGetters } from "vuex"
export default {
    data(){
        return{
          checked:false
        }
    },
    computed:{
      ...mapState({
        haslogin:'haslogin'
      }),
      ...mapGetters({
        carlist:"carlist",
        totalPrice:'cart/totalPrice'
      })
    },
    mounted(){
      // 读取列表
       this.$store.dispatch('cart/get_car_list')
    },
    methods:{
      ...mapActions({
        editCar:'cart/edit_car',
        delCar:'cart/del_car'
      }),
      onSubmit(){},
      
    },
    components:{}
}

</script>
<style scoped>
.goods-card {
  margin: 0;
  background-color: #fff;
}

.delete-button {
  height: 100%;
}
.mt10{
  margin-top: 10px;
}
.van-submit-bar{
  bottom: 50px;
}
</style>